<!-- 游戏管理 -->
<template>
  <el-dialog v-if="props.show" :model-value="props.show" title="修改密码" :close-on-click-modal="false"
    :close-on-press-escape="false" top="12vh" @close="onHideDetails">
    <el-form :model="data.query" class="query" ref="query" status-icon :validate-on-rule-change="false"
      :scroll-to-error="true">
      <form-item title="账号">
        <el-input clearable placeholder="请输入" autocomplete="off" disabled maxlength="20" v-model="username" />
      </form-item>
      <form-item title="旧密码" :pass="true" value="old_password">
        <el-input clearable placeholder="请输入" autocomplete="new-password" type="text"
          v-model="data.query.old_password" />
      </form-item>
      <form-item title="新密码" :pass="true" value="new_password">
        <el-input clearable placeholder="请输入" autocomplete="new-password" type="text"
          v-model="data.query.new_password" />
      </form-item>
      <form-item title="是否验证谷歌验证码" value="google_check">
        <el-radio-group v-model="data.query.google_check" size="large" @change="chooseGoogle">
          <el-radio-button label="不验证" :value="0" />
          <el-radio-button label="验证" :value="1" />
        </el-radio-group>
      </form-item>
      <form-item title="谷歌Url" value="google_url" v-show="data.query.google_check" style="height:auto">
        <QrcodeVue :value="data.query.google_url" :size="140" fg-color="#000" />
        <el-input class="imWidth100 marginT5" v-model="data.query.google_url" type="text" readonly />
      </form-item>
      <form-item title="谷歌秘钥" value="google_secret" v-show="data.query.google_check">
        <el-input class="marginT5" v-model="data.query.google_secret" type="text" readonly />
      </form-item>
      <form-item title="谷歌验证码" :pass="data.userInfo.google_check || data.query.google_check ? true : false"
        value="google_code" v-show="data.userInfo.google_check || data.query.google_check">
        <el-input class="marginT5" v-model="data.query.google_code" type="text" placeholder="请输入谷歌验证码" />
      </form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="data.dialogShow = false">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, watch, computed, unref } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import FormItem from '@/components/FormItem/FormItem.vue'
import { GAMETYPE, DEMOPLAY, GameBrand } from '@/config/eunm'
import { addGame, editGame } from '@/api/game'
import { useStore } from '@/stores/index'
const indexStore = useStore()
const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  showDisable: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  checkedItem: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

watch(
  () => props.checkedItem,
  async (value) => {
    if (value) {
      data.formParams = value as any
    }
  },
)

const data = reactive({
  formParams: {
    id: 0,
    game_id: 0,
    game_type: 1,
    platform: '2',
    show: 1,
    game_name: '',
    game_name_en: '',
    agent_id: 0,
    game_url: '',
    status: 1,
    trial_path: '',
  },
})

const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<typeof data.formParams>>({
  game_id: [{ required: true, message: '请输入游戏ID', trigger: 'blur' }],
  game_name: [{ required: true, message: '请输入中文(Chinese)名称', trigger: 'blur' }],
  game_name_en: [{ required: true, message: '请输入英文(English)名称', trigger: 'blur' }],
  game_url: [{ required: true, message: '请输入GameUrl', trigger: 'blur' }],
})

const save = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let query = JSON.parse(JSON.stringify(data.query))
      if (query.old_password && query.new_password && query.old_password == query.new_password) {
        ElMessage({
          message: '新密码不能与旧密码一样！',
          type: 'warning'
        })
        return
      }
      if(data.userInfo.google_check && !query.google_code){
        return ElMessage({ message: '请输入谷歌验证码', type: 'error' })
      }else if(query.google_check && !query.google_code){
        return ElMessage({ message: '请输入谷歌验证码', type: 'error' })
      }else if(!data.userInfo.google_check && !query.google_check){
        query.google_code = 0
        query.google_url = ''
        query.google_secret = ''
      }else if(query.google_code){
        query.google_code = Number(query.google_code)
      }

      query.username = username.value
      await putchangePassword(query)
      data.dialogShow = false
      ElMessage({
        message: '修改成功',
        type: 'success'
      })
      loginOut()
    }
  })
}

// 重置
const emit = defineEmits(['onHideDetails'])
const onHideDetails = () => {
  emit('onHideDetails', false)
}
</script>

<style scoped lang="scss"></style>
